<script>
    module.exports = {
         created: function () {
             this.$on('set-search-keyword',data=>{
                 this.keyWord=data
             })
        },

        // 组件接受传递属性参数
        props: ['placeholder'],

        data: function(){
            return {
                  keyWord:'',
            }
        },

        methods: {
            search(){
                this.$parent.$emit('search', this.keyWord);
            }
        },

        watch: {
            keyWord(value) {
                if(!value) this.$parent.$emit('search',this.keyWord)
            },
        }
    }
</script>


<template>
    <div class="search f-fl">
        <input type="text" :placeholder="placeholder" class="text f-fl" v-model="keyWord" @keyup.enter="search">
        <a class='search-icon f-fl' @click="search"></a>
    </div>
</template>


<style lang="scss"  scoped>
   .search{
       min-width:240px;
       height:30px;
       line-height:30px;
       margin-left:30px;
       margin-top:15px;
       position:relative;
       input{
           width:185px;
           height:30px;
           display:inline-block;
           border: 1px solid #DDDDDD;
           text-indent:10px;
       }
       a{
           display:inline-block;
           width:30px;
           height:30px;
           border: 1px solid #DDDDDD;
           background:url(./img/searchs.png) center no-repeat;
           border-left:0;
       }

   }


</style>
     